import React, { useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import Title from '@/components/Title'

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/pagination';
import { Autoplay } from 'swiper/modules';

// import * as echarts from 'echarts'
import Echart from '@/pages/echart'
import { useImmer } from 'use-immer';

const TopName = [
  '注意与集中',
  '思维与定向',
  '记忆力',
  '语言能力',
  '反应执行'
]

export default function ElderlyCognition({ resultElder }) {
  const [outIndex, setOutIndex] = useImmer()
  const [isTransitionEnd, setIsTransitionEnd] = useImmer(true)


  const outSwiper = useRef(null)
  const inSwiperRefs = useRef([])


  useEffect(() => {
    inSwiperRefs.current = inSwiperRefs.current.slice(0, TopName.length)
  }, [])

  // swiper
  const handleChangeIn = (swiper, length, index) => {
    if (!isTransitionEnd) return
    if (index == outIndex) {
      swiper.enable()
      console.log(swiper.activeIndex)

      if (length > 3) {
        if (swiper.activeIndex == length - 3) {
          setIsTransitionEnd(false)
          console.log('最后一个ok')


          setTimeout(() => {
            swiper.autoplay.stop()
            outSwiper.current.slideNext()
            swiper.slideTo(0, 0)
            setIsTransitionEnd(true)
          }, 5000)
        }
      }
    }
  }

  const handleChangeOut = (swiper) => {
    setOutIndex(swiper.realIndex)
    outSwiper.current = swiper
    console.log(outIndex, 'outIndex')

    if (outIndex < 4 && SlideTwo(TopName[outIndex + 1])?.length <= 3) {

      console.log('2个的')

      setIsTransitionEnd(false)
      console.log(inSwiperRefs, 'inSwiperRefs')

      inSwiperRefs[outIndex + 1]?.autoplay.stop()

      setTimeout(() => {
        outSwiper.current.slideNext()
        setIsTransitionEnd(true)
      }, 5000)
    }

    // 重置内层轮播图状态
    if (inSwiperRefs.current[swiper.realIndex]) {
      inSwiperRefs.current[swiper.realIndex].slideTo(0, 0)
      inSwiperRefs.current[swiper.realIndex].autoplay.start()
    }
  }

  const initInnerSwiper = (swiper, index) => {
    inSwiperRefs.current[index] = swiper
    if (index === 0) {
      swiper.autoplay.start()
    }
  }

  // 二级slide
  const SlideTwo = (value) => {
    switch (value) {
      case '注意与集中':
        return resultElder?.filter(item => item.type_name === '' || item.type_name === value)
      default:
        return resultElder?.filter(item => item.type_name === value)
    }
  }

  return (
    <div className={styles.elderly_cognition_container}>
      <Title titleDescription={'老年认知评估趋势与干预效果（五大维度）'} />

      {/* 轮播图 */}
      <Swiper
        modules={[Autoplay]}
        spaceBetween={50}
        slidesPerView={1}
        loop={true}
        allowTouchMove={false}
        className={styles.swiper}
        onSlideChange={handleChangeOut}
      >
        {TopName.map((item, index) => {
          return (
            <SwiperSlide key={index}>
              <div className={styles.hd}>{item}</div>
              <Swiper

                modules={[Autoplay]}
                spaceBetween={25}
                slidesPerView={3}
                slidesPerGroup={1}
                allowTouchMove={false}
                autoplay={{
                  delay: 5000,
                  disableOnInteraction: false
                }}
                className={styles.swiper_in}
                onSlideChange={(e) => {
                  handleChangeIn(e, SlideTwo(item)?.length, index)
                }}
                onSwiper={(swiper) => initInnerSwiper(swiper, index)}
              >
                {SlideTwo(item)?.map((el, index) => {
                  return (
                    <SwiperSlide className={styles.item} key={index}>
                      <div className={styles.item_hd}>{el.type_name_2}</div>
                      <div className={styles.item_bd}>
                        <Echart el={el} />
                      </div>
                      <div className={styles.item_footer}>
                        <div className={styles.top}>
                          <div className={styles.left}>干预前：<span>{el.degree_start}级</span></div>
                          <div className={styles.right}>干预后：<span>{el?.degree <= el?.degree_start ? (+el?.degree_start + 0.01).toFixed(2) : el?.degree}级</span></div>
                        </div>
                        <div className={styles.bottom}>
                          <div className={styles.left}>训练人数：</div>
                          <div className={styles.right}>{el.num}</div>
                        </div>
                      </div>
                    </SwiperSlide>
                  )
                })}
              </Swiper>
            </SwiperSlide>
          )
        })}
      </Swiper>
    </div>
  )
}
